<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form">
    <div class="layui-form-item">
        <label class="layui-form-label">客户</label>
        <div class="layui-input-block" style="width:500px ;">
            <select id="client" name="interest" lay-filter="city">
            </select>
            <button type="button" id="addCli" class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add" >新增客户</button>
        </div>

    </div>
    <div class=" layui-form-item">
        <label class="layui-form-label">交货日期</label>
        <div class="layui-input-block" style="width:500px">
            <input type="text" name="date"  id="date1" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item  ">
        <label class="layui-form-label">订单备注</label>
        <div class="layui-input-block" style="width:500px">
            <textarea placeholder="请输入内容" class="layui-textarea" name="remark" id="remark"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form','laydate'], function () {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            $ = layui.$;
        //日期
        laydate.render({
            elem: '#date',
            position: 'static'
        });
        laydate.render({
            elem: '#date1'
        });
        $(function () {
            $.ajax({
                type:"post",
                data:{
                },
                url:"/client",
                error:function(XMLHttpRequest,textStatus,errorThrown){
                    alert("执行失败了!");
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert("textStatus");

                },
                success:function(data){
                    // alert(data);
                    var str="<option value=\"\" selected=\"\"></option>";
                    for (var i=0;i<data.data.length;i++){
                        var po = data.data[i];
                        str+='<option value="'+po.cliId+'"> '+po.cliname+'</option>';
                    }
                    $("#client").html(str);
                    form.render();
                }

            })
        })
        $("#addCli").click(function () {
            layer.open({
                title: '编辑用户',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['80%', '80%'],
                content: '../plan/add-client.html',
            });

        })
        //监听新增订单提交按钮
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                type:"post",
                url:"/order",
                data:{
                    client:data.field.interest,
                    date:data.field.date,
                    remark:data.field.remark
                },
                success:function(data){
                    var msg = data.msg;
                    layer.open({
                        title:['确认消息'],
                        content: msg,
                        btn: ['确定'],
                        shadeClose: true,
                        yes: function(index, layero){
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                        }
                    })
                }

            })

            return false;
        });

    });
</script>
</body>
</html>